<template>
	<view class="">
		<view class="inset-group goods-info">
			<view class="top-desc">
				<image :src="orderDetail.pic" mode="widthFix"></image>
				<view class="center-desc">
					<text class="title">商品已发货</text>
					<text>如有疑问联系客服</text>
				</view>
			</view>			
		</view>		
		
		<view class="inset-group loggistics-info">
			<view class="title" v-if="order_express_info&&order_express_info.exp_num">
				{{order_express_info.exp_name}}{{order_express_info.exp_num}}<text @click="copy">复制</text>
			</view>			
			
			<view class="b-border" v-if="steps.length<=0"/>
			<view class="title" v-if="steps.length<=0">
				<empty description="暂无物流信息"></empty>
			</view>
			<uni-steps class="steps-wrapper" :iconLeft="true" :options="steps" active-color="#db592a" :active="0" direction="column" />
		</view>
	</view>
</template>

<script>
	import api from "../../api/api.js"
	export default {
		data() {
			return {
				active:0,
				orderid:null,
				steps: [
					// {
					// 	text: "123456",
					// 	desc: "2021-12-30 80:00"
					// }
				],
				order_express_info:null
			}
		},
		computed:{
			orderDetail(){
				return this.$store.getters.getOrderDetail
			}
		},
		onLoad(options) {
			if(options.orderid){
				this.orderid = options.orderid;
				this.getInfo(options.orderid)
			}else{
				this.order_express_info = this.orderDetail.express_info;
				if(this.orderDetail.express_info&&this.orderDetail.express_info.locallist){
					this.steps = this.orderDetail.express_info.locallist.map(x=>{
						return {
							title: x.local,
							desc: x.time
						}
					})
				}
			}
		},
		methods: {
			getInfo(id){
				api.getOrderLogistics({
					order_id:id
				}).then(res=>{
					if(res.status==0){
						this.order_express_info = res.data.order_express_info;
						if(this.order_express_info.locallist){
							this.steps = this.order_express_info.locallist.map(x=>{
								return {
									title: x.local,
									desc: x.time
								}
							})
						}
					}
				})
			},
			copy(){
				uni.setClipboardData({
				  data: this.order_express_info.exp_num,
				  success (res) {
					  uni.showToast({
					  	title:"复制成功"
					  })
				  }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>	
	.goods-info{
		font-size: 28rpx;
		margin-top: 20rpx;
		background: #fff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		.top-desc{
			display: flex;
			justify-content: flex-start;
			margin: 20rpx 30rpx;
			image{
				width: 150rpx;
				min-width: 150rpx;
				max-width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
			.center-desc{
				margin: 0 50rpx 0 30rpx;
				display: flex;
				flex-direction: column;
				text{
					&:last-of-type{
						color: #989898;
					}
				}
				.title{
					font-weight: bold;
					margin-bottom: 30rpx;
				}
			}
			
		}		
	}	
	.loggistics-info{
		padding: 30rpx;
		.b-border{
			width: 100%;
			margin: 30rpx 0;
			border-bottom: 1rpx #dcdfe6 solid;
		}
		.title{
			font-size: 24rpx;
			text{
				color: #db592a;
				margin-left: 20rpx;
			}			
		}
		.steps-wrapper{
			margin: 60rpx 0;
		}
	}
	.slot-icon{
		width: 40rpx;
		height: 40rpx;
		display: block;
		background-color: #f9ae3d;
		border-radius: 50%;
		font-size: 22rpx;
		color: #fff;
		line-height: 40rpx;
		text-align: center;
	}
</style>
